<template>
  <div class="earth-box">
    <div
      :class="['earth-viewport', activeViewport === 'earth1' ? 'active' : '']"
      ref="earth1"
      @click="changeViewer('earth1')"
    ></div>
    <div
      :class="['earth-viewport', activeViewport === 'earth2' ? 'active' : '']"
      ref="earth2"
      @click="changeViewer('earth2')"
    ></div>
    <div
      :class="['earth-viewport', activeViewport === 'earth3' ? 'active' : '']"
      ref="earth3"
      @click="changeViewer('earth3')"
    ></div>
    <div
      :class="['earth-viewport', activeViewport === 'earth4' ? 'active' : '']"
      ref="earth4"
      @click="changeViewer('earth4')"
    ></div>
  </div>
  <div class="btn-box">
    <el-button type="primary" @click="toggleSync">{{ isSync ? '关闭同步' : '开启同步' }}</el-button>
    <el-select
      v-model="selectedEarth"
      @change="cancelSync"
      placeholder="请选择取消同步的视口"
      size="large"
      style="width: 200px"
    >
      <el-option
        v-for="earth in viewersList"
        :key="earth.id"
        :label="earth.name"
        :value="earth.mode"
      />
    </el-select>

    <el-select
      v-model="selected2DPoi"
      @change="create2DPoi"
      placeholder="请选择2D POI样式"
      size="large"
      style="width: 180px"
    >
      <el-option
        v-for="item in poi2DOptions"
        :key="item.id"
        :label="item.name"
        :value="item.mode"
      />
    </el-select>
  </div>
</template>

<script setup>
import { onMounted, ref, inject } from 'vue'
import { ESPoi2D } from 'earthsdk3'
import { ElMessage } from 'element-plus' // 添加 ElMessage 引入 已有引入插件,但是防止eslint 报错
// 使用inject获取objm
const objm = inject('objm')
const earth1 = ref(null)
const earth2 = ref(null)
const earth3 = ref(null)
const earth4 = ref(null)
// 存储视口引用
const viewers = ref({})
// 当前活跃视口
const activeViewport = ref('earth1')
const viewersList = ref([
  {
    id: '1',
    name: 'earth1关闭同步',
    mode: 'earth1',
  },
  {
    id: '2',
    name: 'earth2关闭同步',
    mode: 'earth2',
  },
  {
    id: '3',
    name: 'earth3关闭同步',
    mode: 'earth3',
  },
  {
    id: '4',
    name: 'earth4关闭同步',
    mode: 'earth4',
  },
])
// 同步状态
const isSync = ref(true)
const selectedEarth = ref('')
// 2D POI选项
const poi2DOptions = [
  {
    id: '1',
    name: '方形H1',
    mode: 'SquareH01',
  },
  {
    id: '2',
    name: '方形H2',
    mode: 'SquareH02',
  },
  {
    id: '3',
    name: '方形V1',
    mode: 'SquareV01',
  },
  {
    id: '4',
    name: '方形V2',
    mode: 'SquareV02',
  },
  {
    id: '5',
    name: '方形V3',
    mode: 'SquareV03',
  },
  {
    id: '6',
    name: '方形V4',
    mode: 'SquareV04',
  },

  {
    id: '7',
    name: '旗帜1',
    mode: 'Flag01',
  },
  {
    id: '8',
    name: '旗帜2',
    mode: 'Flag02',
  },

  {
    id: '9',
    name: '线形1',
    mode: 'Linear01',
  },
  {
    id: '10',
    name: '线形2',
    mode: 'Linear02',
  },
  {
    id: '11',
    name: '线形3',
    mode: 'Linear03',
  },
  {
    id: '12',
    name: '圆形H1',
    mode: 'CircularH01',
  },
  {
    id: '13',
    name: '圆形H2',
    mode: 'CircularH01',
  },

  {
    id: '14',
    name: '圆形V1',
    mode: 'CircularV01',
  },
  {
    id: '15',
    name: '圆形V2',
    mode: 'CircularV02',
  },
  {
    id: '16',
    name: '圆形V3',
    mode: 'CircularV03',
  },
  {
    id: '17',
    name: '圆形V4',
    mode: 'CircularV04',
  },
  {
    id: '18',
    name: '圆形V5',
    mode: 'CircularV05',
  },

  {
    id: '19',
    name: '圆形H1',
    mode: 'P3D01',
  },
  {
    id: '20',
    name: '圆形H2',
    mode: 'P3D02',
  },
  {
    id: '21',
    name: '圆形H3',
    mode: 'P3D03',
  },
  {
    id: '22',
    name: '圆形H4',
    mode: 'P3D04',
  },
  {
    id: '23',
    name: '圆形H5',
    mode: 'P3D05',
  },
  {
    id: '24',
    name: '圆形H6',
    mode: 'P3D06',
  },
  {
    id: '25',
    name: '圆形H7',
    mode: 'P3D07',
  },
  {
    id: '26',
    name: '菱形H1',
    mode: 'Diamond01',
  },
  {
    id: '27',
    name: '菱形H2',
    mode: 'Diamond02',
  },

  {
    id: '28',
    name: '人物1',
    mode: 'Stranger',
  },
  {
    id: '29',
    name: '人物2',
    mode: 'ManNormal',
  },
  {
    id: '30',
    name: '人物3',
    mode: 'ManAbnormal',
  },
  {
    id: '31',
    name: '人物4',
    mode: 'WomanNormal',
  },
  {
    id: '32',
    name: '人物5',
    mode: 'WomanAbnormal',
  },
]
const selected2DPoi = ref('')

onMounted(() => {
  if (!earth1.value && !earth2.value && !earth3.value && !earth4.value) return
  //创建视口
  viewers.value.earth1 = objm.createCesiumViewer(earth1.value)
  viewers.value.earth1.devTags = ['_ES_Viewer_1'] // 添加标签
  viewers.value.earth2 = objm.createCesiumViewer(earth2.value)
  viewers.value.earth2.devTags = ['_ES_Viewer_2'] // 添加标签
  viewers.value.earth3 = objm.createCesiumViewer(earth3.value)
  viewers.value.earth3.devTags = ['_ES_Viewer_3'] // 添加标签
  viewers.value.earth4 = objm.createCesiumViewer(earth4.value)
  viewers.value.earth4.devTags = ['_ES_Viewer_4'] // 添加标签
  console.log('存储的引用', viewers.value)

  // 通过json创建一个 Cesium 影像图层
  objm.createSceneObjectFromJson({
    id: '9812a65f-0de0-4f7b-b234-809c0c2fb8ef',
    type: 'ESImageryLayer',
    url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
  })
  //开启同步  其他视口的属性同步至activeViewer的属性
  objm.syncOtherViewersToActived = true
})

// 切换活跃视口
const changeViewer = (viewerName) => {
  activeViewport.value = viewerName
  if (viewers.value[viewerName]) {
    objm.activeViewer = viewers.value[viewerName]
  }
}

// 切换全局同步状态
const toggleSync = () => {
  isSync.value = !isSync.value
  objm.syncOtherViewersToActived = isSync.value
}

const cancelSync = (value) => {
  // 检查选择的视口是否是当前活跃视口
  if (value === activeViewport.value) {
    ElMessage({
      message: '无法取消活跃视口的同步！',
      type: 'warning',
    })
    selectedEarth.value = '' // 重置选择
    return
  }

  // 如果选择了某个地球视图，则取消该视图的同步
  if (value && viewers.value[value]) {
    // 将选中的viewer执行syncOtherViewer方法，取消该viewer的同步
    viewers.value[value].syncOtherViewer(undefined)
    ElMessage({
      message: `已取消 ${value} 的同步`,
      type: 'success',
    })
  }
  selectedEarth.value = ''
}

const create2DPoi = (mode) => {
  const poi = objm.createSceneObject(ESPoi2D)
  if (!poi) return
  poi.mode = mode
  // 根据当前激活的视口设置正确的devTags
  switch (activeViewport.value) {
    case 'earth1':
      poi.devTags = ['_ES_Viewer_1']
      break
    case 'earth2':
      poi.devTags = ['_ES_Viewer_2']
      break
    case 'earth3':
      poi.devTags = ['_ES_Viewer_3']
      break
    case 'earth4':
      poi.devTags = ['_ES_Viewer_4']
      break
    default:
      poi.devTags = ['_ES_Viewer_1'] // 默认设置为第一个视口
  }
  poi.editing = true
  // 创建完成后清空选择
  selected2DPoi.value = ''
}
</script>

<style lang="scss" scoped>
.earth-box {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  grid-template-rows: 1fr 1fr; /* 两行等高 */
  gap: 5px; /* 视口之间的间隔 */
  .earth-viewport {
    width: 100%;
    height: 100%;
    min-height: 0; /* 防止在某些浏览器中出现溢出 */
    overflow: hidden; /* 防止可能的溢出 */
    border: 5px solid #ccc; /* 添加边框以便于区分视口 */
  }
  .active {
    border: 5px solid #29e635; /* 添加边框以便于区分视口 */
  }
}
.btn-box {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 10px;
  button {
    height: 40px;
  }
}
</style>
